<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" type="image/x-icon" href="/plugin/favicon.ico">
    <link rel="stylesheet" href="/plugin/elementUI/elementUI.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
</head>
<body>
    <div class="main">
        <div v-show="showList">
            <el-row type="flex" justify="start">
                <el-col :span="4">
                    <el-input placeholder="请输入角色名称" icon="search" v-model="queryParam.name" :on-icon-click="query" v-on:keyup.enter="query" />
                </el-col>
                <el-col :span="20">
                    <div align='right'>
                        <el-button shiro:hasPermission="sys:role:add" type="primary" @click="changeAddOrEdit('add')" icon="plus">新增</el-button>
                        <el-button shiro:hasPermission="sys:role:edit" type="primary" @click="changeAddOrEdit('edit')" icon="edit">修改</el-button>
                        <el-button shiro:hasPermission="sys:role:delete" type="primary" @click="del" icon="delete">删除</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table ref="table" :data="page.dataList" border
                              tooltip-effect="dark" style="width: 100%" @selection-change="getSelected">
                        <el-table-column type="selection" width="55" prop="menu_id" />

                        <el-table-column type="index" label="序号" width="80" prop="menu_id" />

                        <el-table-column prop="name" label="名称" width="200" />

                        <el-table-column prop="user.user_name" label="创建人" width="100" />

                        <el-table-column prop="create_time" label="创建时间" width="200" sortable />

                        <el-table-column prop="memo" label="描述"  />

                        <el-table-column fixed="right" label="操作" width="100">
                            <template scope="scope">
                                <el-button type="warning"   @click="getRoleMenu(scope.row)" size="small">分配权限</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNo" :total="page.total"
                                   :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" />
                </el-col>
                <el-dialog title="分配权限" :visible.sync="dialogVisible" size="tiny">
                    <el-tree :data="treeData" show-checkbox default-expand-all :check-strictly="true"
                            node-key="menu_id" ref="tree" highlight-current
                            :props="defaultProps">
                    </el-tree>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirm">确 定</el-button>
                </el-dialog>
            </el-row>
        </div>
        <div v-show="!showList">
            <el-form label-position="right" label-width="40%" ref="form" :model="form" :rules="rules">
                <el-row type="flex" justify="start">
                    <el-col :span="10">
                        <el-input v-model="form.menu_id" type="hidden"></el-input>
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="描述" prop="memo">
                            <el-input v-model="form.memo" type="textarea" :autosize="{ minRows: 2}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="start" :gutter="20">
                    <el-col  :span="6" :offset="5">
                        <el-form-item >
                            <el-button type="primary" @click="addOrEdit" v-loading.fullscreen.lock="loading">{{text.submitButtonText}}</el-button>
                            <el-button @click="resetForm">重置</el-button>
                            <el-button type="info" @click="goBack">返回</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
    </div>
    <script type="text/javascript" src="/plugin/jQuery.js"></script>
    <script type="text/javascript" src="/plugin/vue.js"></script>
    <script type="text/javascript" src="/plugin/elementUI/elementUI.js"></script>
    <script type="text/javascript" src="/js/role.js"></script>
</body>
</html>